<!--
 * @Author: Bonnie
 * @Date: 2021-09-01 14:19:28
 * @LastEditTime: 2021-09-01 14:59:43
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /custom/src/views/CssSpinners.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
// 需要在html里引入对应资源  *-loader

<template>
  <div>
    <div class="grid">
      <div class="cell">
        <div class="card">
          <span class="spinner-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="throbber-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="refreshing-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="heartbeat-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="gauge-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="timer-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="three-quarters-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="wobblebar-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="atebits-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="whirly-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="flower-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="dots-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="circles-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="plus-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="ball-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="hexdots-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="inner-circles-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="pong-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="pulse-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="spinning-pixels-loader">Loading…</span>
        </div>
      </div>

      <div class="cell">
        <div class="card">
          <span class="echo-loader">Loading…</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CssSpinners",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
.grid {
  display: flex;
  flex-wrap: wrap;
  .cell {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin: 10px;
    width: 230px;
    height: 320px;
    border: 1px solid #eee;
    border-radius: 12px;
  }
}
</style>